<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table size="mini" :data="props.row.orderFruits" style="width: 100%">
            <el-table-column prop="fruit.name" label="名称">
            </el-table-column>
            <el-table-column prop="fruit.image" label="图片">
              <template slot-scope="scope">
                <el-image style="width: 70px; height: 70px" :src="scope.row.fruit.image ? scope.row.fruit.image : ''"></el-image>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="fruit.category.name" label="分类">
          </el-table-column> -->
            <el-table-column prop="number" label="数量">
            </el-table-column>
            <el-table-column label="价格">

              <template slot-scope="scope">
                {{ scope.row.number * Number(scope.row.fruit.price) }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="订单ID" prop="id">
      </el-table-column>
      <el-table-column label="总价" prop="totalPrice">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getOrderByPage, deleteOrder, getOrderById, updateOrderById,
  batchDeleteOrder, addOrder
} from "@/api/order.js"
export default {
  data() {
    return {
      tableData: [],
    }
  },
  created() {
    this.initTableData()
  },
  methods: {
    initTableData() {
      getOrderByPage({ page: 1, size: 100 }).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.records
        }
      })
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>